<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <title>小米首页</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <script>
        !(function (win, doc) {
            function setFontSize() {
                var winWidth = window.innerWidth;
                doc.documentElement.style.fontSize = (winWidth / 720) * 100 + 'px';
            }
            var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
            var timer = null;
            win.addEventListener(evt, function () {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }, false);
            win.addEventListener("pageshow", function (e) {
                if (e.persisted) {
                    clearTimeout(timer);
                    timer = setTimeout(setFontSize, 300);
                }
            }, false);
            setFontSize();
        }(window, document));
        // 1rem = 34.7222px
    </script>
</head>
<body>
    <header>
        <div class="header">
            <div class="logo_img"> <a href="./index.html"><img src="./img/logo.png" alt=""></a></div>
            <div class="sousuo">
                <span class="iconfont icon-sousuo6"></span>
                <input type="text" placeholder="搜索商品名称">        
            </div>
            <div class="denglu">
                <a href="./wode.html"><span class="iconfont icon-denglu2"></span></a>
            </div>
        </div>
        <div class="nav">
            <ul>
                <li>推荐</li>
                <li>智能</li>
                <li>电视</li>
                <li>家电</li>
                <li>笔记本</li>
                <li class="drowdown">
                    <span class="iconfont icon-xiajiantou">
                    </span>
                    <div class="drowdown-content">
                        <h1>全部</h1>
                        <div class="content">
                            <a href="">推荐</a>
                            <a href="">智能</a>
                            <a href="">电视</a>
                            <a href="">家电</a>
                            <a href="">笔记本</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <nav>
        <div>
            <img src="./img/lunbotu1.jpg" alt="">
            <img src="./img/lunbotu2.jpg" alt="">
            <img src="./img/lunbotu3.jpg" alt=""> 
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
    <article>
        <div class="article_1">
            <ul>
                <li>
                    <img src="./img/shige1.webp" alt="">
                    
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                   
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                 
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                   
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                   
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                   
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                    
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                
                </li>
                <li>
                    <img src="./img/shige1.webp" alt="">
                
                </li>
            </ul>
        </div>
        <div class="article_2">
            <aside class="article_2_top">
                <img src="./img/article_2.webp" alt="">
            </aside>
            <aside class="article_2_down">
                <img src="./img/article_3.webp" alt="">
                <img src="./img/article_4.webp" alt="">
            </aside>
        </div>
        <div class="article_3">
            <img src="./img/article1.webp" alt="">
        </div>
        <div class="article_4">
            <ul>
                <li>
                    <img src="./img/article_4_1.jpg" alt="">
                    <section>
                        <h5>Xioami 10 Pro</h5>
                        <p class="p1">1/1.12"GN2" | 骁龙888</p>
                        <p class="p2">￥4499起<span>￥4999</span></p>
                        <div ><a href="./xiaomi10.html">立即购买</a> </div>
                    </section>

                </li>
                <li>
                    <img src="./img/article_4_1.jpg" alt="">
                    <section>
                        <h5>Xioami 10 Pro</h5>
                        <p class="p1">1/1.12"GN2" | 骁龙888</p>
                        <p class="p2">￥4499起<span>￥4999</span></p>
                        <div ><a href="./xiaomi10.html">立即购买</a> </div>
                    </section>

                </li>
                <li>
                    <img src="./img/article_4_1.jpg" alt="">
                    <section>
                        <h5>Xioami 10 Pro</h5>
                        <p class="p1">1/1.12"GN2" | 骁龙888</p>
                        <p class="p2">￥4499起<span>￥4999</span></p>
                        <div ><a href="./xiaomi10.html">立即购买</a> </div>
                    </section>

                </li>
                <li>
                    <img src="./img/article_4_1.jpg" alt="">
                    <section>
                        <h5>Xioami 10 Pro</h5>
                        <p class="p1">1/1.12"GN2" | 骁龙888</p>
                        <p class="p2">￥4499起<span>￥4999</span></p>
                        <div ><a href="./xiaomi10.html">立即购买</a> </div>
                    </section>

                </li>
                <li>
                    <img src="./img/article_4_1.jpg" alt="">
                    <section>
                        <h5>Xioami 10 Pro</h5>
                        <p class="p1">1/1.12"GN2" | 骁龙888</p>
                        <p class="p2">￥4499起<span>￥4999</span></p>
                        <div > <a href="./xiaomi10.html">立即购买</a> </div>
                    </section>

                </li>
                <li>
                    <img src="./img/article_4_1.jpg" alt="">
                    <section>
                        <h5>Xioami 10 Pro</h5>
                        <p class="p1">1/1.12"GN2" | 骁龙888</p>
                        <p class="p2">￥4499起<span>￥4999</span></p>
                        <div ><a href="./xiaomi10.html">立即购买</a> </div>
                    </section>

                </li>
                <li>
                    <img src="./img/article_4_1.jpg" alt="">
                    <section>
                        <h5>Xioami 10 Pro</h5>
                        <p class="p1">1/1.12"GN2" | 骁龙888</p>
                        <p class="p2">￥4499起<span>￥4999</span></p>
                        <div ><a href="./xiaomi10.html">立即购买</a> </div>
                    </section>

                </li>
                <li>
                    <img src="./img/article_4_1.jpg" alt="">
                    <section>
                        <h5>Xioami 10 Pro</h5>
                        <p class="p1">1/1.12"GN2" | 骁龙888</p>
                        <p class="p2">￥4499起<span>￥4999</span></p>
                        <div ><a href="./xiaomi10.html">立即购买</a> </div>
                    </section>
                </li>
            </ul>
            <aside><p>更多小米手机产品 ></p></aside>
        </div>
        <div class="article_5">
            <img src="./img/article_5_1.webp" alt="">
            <aside><p>更多小米电视产品 ></p></aside>
        </div>
        <div class="article_6">
            <section>
                <img src="./img/article_6_1.webp" alt="">
            </section>
            <ul>
                <li>
                    <img src="./img/article_6_2.jpg" alt="">
                    <section>
                        <h5>小米笔记本Pro 15</h5>
                        <p class="p1">大师屏 轻薄大作 | 新北孟</p>
                        <p class="p2">￥6399起<span>￥6499</span></p>
                        <div >立即购买</div>
                    </section>
                </li>
                <li>
                    <img src="./img/article_6_2.jpg" alt="">
                    <section>
                        <h5>小米笔记本Pro 15</h5>
                        <p class="p1">大师屏 轻薄大作 | 新北孟</p>
                        <p class="p2">￥6399起<span>￥6499</span></p>
                        <div >立即购买</div>
                    </section>
                </li>
            </ul>
            <aside><p>更多小米电视产品 ></p></aside>

        </div>
        <div class="article_7">
            <img src="./img/article_7_1.webp" alt="">
            <aside><p>更多小米家电产品 ></p></aside>
        </div>
        <div class="article_8">
            <img src="./img/article_8_1.webp" alt="">
            <aside><p>更多小米智能产品 ></p></aside>
        </div>
        <div class="article_9">
            <ul>
                <li><img src="./img/article_9_1.webp" alt=""></li>
                <li><img src="./img/article_9_1.webp" alt=""></li>
                <li><img src="./img/article_9_1.webp" alt=""></li>
                <li><img src="./img/article_9_1.webp" alt=""></li>
                <li><img src="./img/article_9_1.webp" alt=""></li>
                <li><img src="./img/article_9_1.webp" alt=""></li>
            </ul>
        </div>
        <div class="article_10">
            <img src="./img/article_10.webp" alt="">
        </div>
    </article>
    <footer>
        <ul>
            <li>
                <img src="./img/icon-home-selected.598ca2c8f9.png" alt="">
                <a href="#">首页</a>
            </li>
            <li>
                <img src="./img/icon-category.be93273636.png" alt="">
                <a href="./分类.html">分类</a>
            </li>
            <li>
                <img src="./img/icon-star.d051789804.png" alt="">
                <a href="./miquan.html">米圈</a>
            </li>
            <li>
                <img src="./img/icon-cart.585c3aa4d3.png" alt="">
                <a href="./gouwuche.html">购物车</a>
            </li>
            <li>
                <img src="./img/icon-user.23496a0116.png" alt="">
                <a href="./wode.html">我的</a>
            </li>
        </ul>
    </footer>
</body>
</html>